//扩展treeSelect功能
layui.config({
    base: str+'/js/'
}).extend({
    treeSelect: 'treeSelect',
    treetable: 'treetable'
});

var parentdepartmentid = "12";

layui.use(['table', 'jquery', 'form','treeSelect','upload'], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var form = layui.form;
    var treeSelect = layui.treeSelect;
    var upload = layui.upload;

    var t = table.render({
        elem: '#depTable'
        , url: str+'/user/findAll'
        , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        , title: '用户数据表'
        , cols: [[
            {type: 'checkbox', fixed: 'left'}
            , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
            , {field: 'login_name', title: '登录名', width: 180}
            , {field: 'pwd', title: '密码', width: 150}
            , {field: 'sexStr', title: '性别', width: 80}
            , {field: 'statusStr', title: '状态', width: 80}
            , {field: 'name', title: '真实名', width: 150}
            , {
                field: 'role.name', title: '角色名', width: 150, templet: function (f) {
                    if (f.role != null) {
                        return f.role.name;
                    }
                    return "";
                }
            }
            , {
                field: 'department.name', title: '部门名', width: 150, templet: function (f) {
                    if (f.department == null) {
                        return "无";
                    }
                    return f.department.name;
                }
            }
            , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
        ]]
        , page: true
        , parseData: function (rs) { //res 即为原始返回的数据
            return {
                "code": rs.code, //解析接口状态
                "msg": rs.msg, //解析提示文本
                "count": rs.data.total, //解析数据长度
                "data": rs.data.list //解析数据列表
            };
        }
        , response: {
            statusCode: 200 //规定成功的状态码，默认：0
        }
    });

    /*搜索按钮绑定单击事件*/
    $("#searchBtn").click(function () {
        var user_name = $("#user_name").val();
        var user_sex = $("#user_sex").val();

        t.reload({
            where: {
                'login_name': user_name,
                'sex': user_sex,
            }
        });
    });

    //实现下拉树型数据加载
    function render() {
        //实现下拉树型数据加载
        treeSelect.render({
            elem: '#tree',//选择器
            data: str+'/dep/findChildren?id=0',// 数据
            type: 'get',// 异步加载方式：get/post，默认get
            placeholder: '请选择部门',// 占位符
            search: true,// 是否开启搜索功能：true/false，默认false
            click: function (d) { // 点击回调
                $("#parentdepartmentid").val(d.current.id);
                console.log(d.current.id);
            },
            success: function (d) {// 加载完成后的回调函数
                console.log(d);
                //选中节点，根据id筛选
                treeSelect.checkNode('tree', parentdepartmentid);
                //获取zTree对象，可以调用zTree方法
                var treeObj = treeSelect.zTree('tree');
                console.log(treeObj);
                //刷新树结构
                treeSelect.refresh();
            }
        });
    }

    /*监听头工具栏事件*/
    table.on('toolbar(depTable)', function (obj) {
        var event = obj.event;/*添加客户*/
        if (event == "addDep") {
            /*弹出层 让管理员输入*/
            add();
        }
        /*批量删除*/
        else if (event == "mostDel") {
            //确认是否有选中的ID
            var checkStatus = table.checkStatus('depTable'); //departmentlisttableId 即为 table 对应的 id 属性的值
            var data = checkStatus.data;
            if (data.length == 0) {
                layer.msg("请先选择要删除的数据！");
                return false;
            }
            mostDel(data);
        }
    });

    //初始化文件上传组件
    function uploadRender() {
        //初始化文件上传组件
        upload.render({
            elem:"#upload",//绑定文件上传的容器 也就是绑定点击哪个按钮会弹出上传框
            auto:false,//关闭自动上传
            accept:"images",//限定上传的文件为图片
            choose:function (obj) {//图片选择时触发
                //实现图片预览
                obj.preview(function (index,file,base64) {
                    //index 得到文件索引
                    //file  得到文件对象
                    //base64 得到文件base64编码，比如图片
                    $("#userImg").attr("src",base64);
                });
            },
        });
    }

    //初始化部门选择框组件
    function SelectRender(id) {
        $.post(str+"/role/findAll", {}, function (rs) {
            if (rs.code == 200) {
                var list = '';
                //<option value="">请选择</option>
                for (var i = 0; i < rs.data.length; i++) {
                    if (rs.data[i].id == id){
                        var li = '<option value="' + rs.data[i].id + '" selected="selected">' + rs.data[i].name + '</option>';
                        list += li;
                    }else {
                        var li = '<option value="' + rs.data[i].id + '">' + rs.data[i].name + '</option>';
                        list += li;
                    }
                }
                $("#role").append(list);
                form.render();
            }
        }, "json");
    }

    /*添加用户方法*/
    function add() {
        /*弹出层*/
        layer.open({
            type: 1,
            content: $("#addU").html(),
            btn: ['提交', '取消'],
            title: "部门新增",
            area: ['730px', '500'],
            btnAlign: 'c',
            yes: function (layero, index) {//点击提交按钮时触发
                $("#submitBtn").click();
            },
            success: function (layero, index) {//页面弹出成功时触发
                render();

                uploadRender();

                SelectRender();

                //表单
                form.render();
                //表单提交按钮监听
                form.on('submit(submitBtn)', function (data) {
                    var formobj =  document.getElementById("formId");
                    var form = new FormData(formobj);//创建formData
                    form.append("upload", $("#upload")[0].files[0]);
                    $.ajax({
                        url: str+"/user/save",
                        data: form,
                        processData: false, //因为data值是FormData对象，不需要对数据做处理。
                        contentType: false,
                        type: "post",
                        encType:'multipart/form-data',
                        dataType: "json",//必须
                        success: function(rs) {
                            if (rs.code == 200) {
                                layer.msg("添加成功");
                                //让搜索按钮点击
                                $("#searchBtn").click();
                                //关闭弹层
                                layer.close(index);
                                //方法结束
                                return false;
                            }
                            layer.msg(rs.msg);
                        }

                    });

                });
            }
        })
    }

    /*批量删除*/
    function mostDel(data) {
        var ids = "";
        $.each(data, function (index, value) {
            ids = ids + "id=" + value.id + "&";
        });
        layer.confirm("你确定要删除么", function (index) {
            $.get(str+"/user/del", ids, function (rs) {
                if (rs.code == 200) {
                    layer.msg("删除成功！");
                    //让搜索按钮进行点击  刷新table
                    $("#searchBtn").click();
                    //关闭弹层
                    layer.close(index);
                    //? 停止AJAX 不再执行下面代码
                    return false;
                }

                layer.msg(rs.msg);
                //关闭弹层
                layer.close(index);
            }, "json")
        });
    }

    //监听行具条
    table.on('tool(depTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var event = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        console.log(data);
        if (event == "updataDep") {
            /*弹出一个层*/
            update(data);
        }
    });

    /*部门修改方法*/
    function update(data) {
        /*弹出层*/
        layer.open({
            type: 1,
            content: $("#addU").html(),
            btn: ['提交', '取消'],
            title: "客户信息修改",
            area: ['700px', '500'],
            btnAlign: 'c',
            yes: function (layero, index) {//点击提交按钮时触发
                $("#submitBtn").click();
            },
            success: function (layero, index) {//页面弹出成功时触发
                render();

                uploadRender();

                SelectRender(data.role_id);

                //表单赋值 Name area type ParentDepartmentId Description
                var imgURL =data.img;
                $("#name").prop("value", data.name);
                $("#login_name").prop("value", data.login_name);
                $("#login_name").prop("readonly", "readonly");
                $("#email").prop("value", data.email);
                $("#pwd").prop("value", data.pwd);
                $("#mobile").prop("value", data.mobile);
                $("#userImg").prop("src",imgURL);
                $("#status").prop("value",data.status);
                $("#sex").prop("value",data.sex);
                $("#upload").removeAttr("lay-verify");

                //重新渲染组件
                //表单
                form.render();
                form.on('submit(submitBtn)', function (d) {
                    var formobj =  document.getElementById("formId");
                    var fo = new FormData(formobj);//创建formData
                    fo.append("upload", $("#upload")[0].files[0]);
                    //表单提交按钮监听
                    $.ajax({
                        url: str+"/user/upd?id=" + data.id,
                        data: fo,
                        processData: false, //因为data值是FormData对象，不需要对数据做处理。
                        contentType: false,
                        type: "post",
                        encType:'multipart/form-data',
                        dataType: "json",//必须
                        success: function(rs) {
                            if (rs.code == 200) {
                                layer.msg("修改成功");
                                //让搜索按钮点击
                                $("#searchBtn").click();
                                //关闭弹层
                                layer.close(index);
                                //方法结束
                                return false;
                            }
                            layer.msg(rs.msg);
                        }

                    });

                });
            }
        })
    }

});